<template>
	<div id="index">
		<div>
			<swiper :options="swiperOption" ref="mySwiper">
				<swiper-slide>
					<img :src="require('./img/index_banner_swiper1.jpg')" style="width:100%">
				</swiper-slide>
				<swiper-slide>
					<img :src="require('./img/index_banner_swiper2.jpg')" style="width:100%">
				</swiper-slide>
				<swiper-slide>
					<img :src="require('./img/index_banner_swiper3.jpg')" style="width:100%">
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<nav class="border_b1">
      <div class="wrapper">
        <router-link to="/home/index/order">
          <div>
            <em>定制<br/><small>CUSTOMIZED</small></em>
          </div>
          <img v-lazy="require('./img/index_order.png')" style="width:.4rem;" /><br/>
          定制
        </router-link>
        <router-link to="/home/index/weiz">
          <div>
            <em>微整<br/><small>PLASTIC</small></em>
          </div>
          <img v-lazy="require('./img/mall_weiz.png')" style="width:.45rem;" /><br/>
          微整
        </router-link>
        <router-link to="/home/index/meif">
          <div>
            <em>美肤<br/><small>BEAUTY</small></em>
          </div>
          <img v-lazy="require('./img/mall_meif.png')" style="width:.45rem;" /><br/>
          美肤
        </router-link>
        <router-link to="/home/index/doc">
          <div>
            <em>医生<br/><small>DOCTOR</small></em>
          </div>
          <img v-lazy="require('./img/mall_doctor.png')" style="width:.48rem;" /><br/>
          医生
        </router-link>
        <router-link to="/home/index/hos">
          <div>
            <em>医院<br/><small>HOSPITAL</small></em>
          </div>
          <img v-lazy="require('./img/mall_hospital.png')" style="width:.46rem;" /><br/>
          医院
        </router-link>
      </div>
    </nav>

      <!-- <keep-alive> -->
        <router-view></router-view>
      <!-- </keep-alive> -->
	</div>
</template>

<script>
import {swiper,swiperSlide} from 'vue-awesome-swiper'

export default{
	components:{
		swiper,swiperSlide,
	},
	data(){
		return {
                swiperOption: {
	                //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
	                notNextTick: true,
	                pagination: '.swiper-pagination',
	                autoplay: 3600,
	                speed:800,
	                autoplayDisableOnInteraction:false,
	                centeredSlides: true,
	                paginationClickable: true,
	                spaceBetween: 10,
	                // onSlideChangeEnd: swiper => {
		               //      //这个位置放swiper的回调方法
		               //      this.page = swiper.realIndex+1;
		               //      this.index = swiper.realIndex;
	                // }
                },
                navActive:[false,false,false,false,false],
            }  
	},
  computed:{

  },
  created(){
  }
}
</script>

<style lang='scss'>
nav{
    background-color: #fff;
    &:after{border-color:#e4e4e4;}
    .wrapper{
      height:1.6rem;display:table;width:100%;overflow: hidden;
      a{display:table-cell;width:20%;vertical-align: middle;text-align:center;font-size:.18rem;position:relative;z-index: 1;
        div{opacity: 0;transition: all .3s;position: absolute;top:-1.6rem;bottom:0;right:0;left:0;height:1.6rem;
            background: -webkit-gradient(linear, right top, left bottom, from(#fbe0e0),to(#fac4c0));z-index:22;
            display:flex;font-size:.32rem;color:#202020;line-height:1;align-items:center;justify-content: center;
            small{font-size:.14rem;color:#db848c;}
        }
      }
      a.router-link-active{
        div{opacity: 1;top:0;}
      }
      img{margin-bottom:.22rem;}
    }
  }
</style>
